<template>
  <div id="footerbottom">
    <tabbar v-model="index" v-show="isTabbarShow">
      <tabbar-item :link=url_home>
        <img slot="icon" src="../../assets/svg/bottom/home_inactive.svg">
	      <img slot="icon-active" src="../../assets/svg/bottom/home_active.svg">
        <span slot="label">主页</span>
      </tabbar-item>
      <tabbar-item :link=url_customer>
	      <img slot="icon" src="../../assets/svg/bottom/students_inactive.svg">
	      <img slot="icon-active" src="../../assets/svg/bottom/students_active.svg">
        <span slot="label">学员</span>
      </tabbar-item>
      <tabbar-item :link="url_discovery">
	      <img slot="icon" src="../../assets/svg/bottom/discovery_inactive.svg">
	      <img slot="icon-active" src="../../assets/svg/bottom/discovery_active.svg">
        <span slot="label">发现</span>
      </tabbar-item>
      <tabbar-item :link="url_lesson">
	      <img slot="icon" src="../../assets/svg/bottom/lesson_inactive.svg">
	      <img slot="icon-active" src="../../assets/svg/bottom/lesson_active.svg">
        <span slot="label">课程</span>
      </tabbar-item>
      <tabbar-item :link="url_mine">
	      <img slot="icon" src="../../assets/svg/bottom/mine_inactive.svg">
	      <img slot="icon-active" src="../../assets/svg/bottom/mine_active.svg">
        <span slot="label">我</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
	import bus from '@/event/eventBus'
  import { Tabbar, TabbarItem, XHeader, XInput, Group, XButton, Cell } from 'vux'

  export default {
    name: 'footerbottom',
    components: {
      Tabbar,
      TabbarItem,
      XHeader,
      XInput,
      XButton,
      Group,
      Cell
    },
	  props: ['idx'],
	  created: function () {
		  let _this = this
		  bus.$on("userDefinedEvent", function (msg) {
		  	_this.index = msg
		  })

		  if(this.idx != null){
		  	debugger
			  _this.index = this.idx
		  }

	  },
	  watch: {
    	index: function () {
		    console.log('index: ' + this.index)
	    }
	  },
	  data() {
    	return {
    		index: 0,
		    url_home: {
			    path: '/',
			    replace: true
		    },
		    url_customer: {
			    path: '/customer',
			    replace: true
		    },
		    url_discovery: {
			    path: '/discovery',
			    replace: true
		    },
		    url_lesson: {
			    path: '/lesson',
			    replace: true
		    },
		    url_mine: {
			    path: '/mine',
			    replace: true
		    },
		    isTabbarShow: true
	    }
	  }
  }
</script>

<style scoped>
  .weui-tabbar {
    left: 0;
    position: fixed;
  }
</style>
